
<template>
	<view class="live-control-main">
		<view class="live-control-left">
			<view class="change-btn" @tap="handleLive('switch')">
				<image src="/static/images/live/flip.png" class="change-image"></image>
			</view>
		</view>
		
		<view class="live-control-right">
			<view class="live-control-right-start" v-if="state === 0" @tap="handlePopup('start', 'open')">
				<text class="live-control-right-start-text">开始直播</text>
			</view>
			
			<view class="live-control-right-start" v-if="state == 1" @tap="back()">
				<text class="live-control-right-start-text">关闭直播</text>
			</view>
		</view>
		
		<!-- 准备直播 -->
		<view class="live-popup">
			<uniPopup ref="start" type="bottom">
				<view class="live-popup">
					<view class="live-popup-title">
						<text class="live-popup-title-text">准备直播</text>
						<image src="/static/images/close.png"  class="live-popup-title-close-text" 
						@tap="handlePopup('start','close')"></image>
					</view>
					<scroll-view :show-scrollbar="false" scroll-y="true" class="live-popup-list" 
					:style="{height: screenHeight * 0.3 +'px'}">
						<view class="start-list">
							
							<text class="category-title">直播分类</text>
							
							<!-- 直播分类 -->
							<view class="category-box">
								<text v-for="(item, index) in categoryList" :key="index"
								:class="curCategory===item.id ? 'category-item-active mr60' : 'category-item mr60'"
								 @click="changeCategory(item.id)">
									{{item.name || ''}}
								</text>
							</view>
							
						</view>
					</scroll-view>
					
					<view class="live-popup-start live-control-right-start" 
					:style="{bottom: statusFootHeight + 9 + 'px'}"
					 @tap="goLive()">
						<text class="live-control-right-start-text">马上开启直播之旅</text>
					</view>
					
					<!-- 多终端兼容性 -->
					<view :style="{height: statusFootHeight + 'px'}"></view>
				</view>
			</uniPopup>
		</view>
		
		
	</view>
</template>
<script>
	import uniPopup from '@/components/uni-popup/uni-popup';
	import {BASE_URL} from '@/env.js'
	
	export default {
		components: {
			uniPopup,
		},
		name: "LiveFooter",
		props: {
			state: {
				default: 0
			},
			screenHeight: {
				default: 0
			},
			screenWidth: {
				default: 0
			},
			statusFootHeight: {
				default: 0
			},
		},
		data() {
			return {
				categoryList: [],
				curCategory:0,
			}
		},
		mounted() {
			this.getCategory();
		},
		methods: {
			getCategory(){
				uni.request({
					url: '/live/typelist',
					success: res => {
						res = res.res;
						if(res.code===1){
							if(res.data.length > 0){
								this.curCategory = res.data[0].id;
							}
							this.categoryList = res.data;
						}else{
							uni.showToast({title: res.msg, icon: 'error'});
						}
					}
				});
			},
			goLive(){
				if(!this.curCategory){
					this.$wanlshop.msg('请选择直播分类');
					return false;
				}
	
				this.$emit('handleLive', 'start', {type_id: this.curCategory});
				this.$refs.start.close();
			},
			async handlePopup(type, method){
				this.$refs[type][method]();
			},
			back() {
				this.$emit('back');
			},
			changeCategory(type){
				this.curCategory = type;
			},
			handleLive(type){
				this.$emit('handleLive', type);
			}
		}
	}
</script>

<style>

.live-control-main{
	padding-top: 18rpx;
	padding-bottom: 18rpx;
	padding-left: 36rpx;
	padding-right: 36rpx;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	display: flex;
}

.live-control-left {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-right: 60rpx;
}

.live-control-right{
	flex: 1;
}

.live-control-right-start{
	display: flex;
	background: #f40;
	align-items: center;
	justify-content: center;
	height: 76rpx;
	border-radius: 40rpx;
}

.live-control-right-start-text{
	color: #fff;
	font-size: 30rpx;
}

.change-btn{
	width: 80rpx;
	height: 80rpx;
	background: rgba(0,0,0,0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.change-image{
	width: 50rpx;
	height: 50rpx;
}

/* 弹框 */
.live-popup{
	position: relative;
	background: rgba(255, 255, 255, 0.93);
	padding-left: 18rpx;
	padding-right: 18rpx;
	border-top-left-radius: 18rpx;
	border-top-right-radius: 18rpx;	
}	
.live-popup-title {
	height: 100rpx;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.live-popup-title-text {
	font-size: 32rpx;
}

.live-popup-title-close-text{
	width: 40rpx;
	height: 40rpx;
}

.live-popup-list{
	margin-bottom: 108rpx;
}		
		
.live-popup-start {
	position: absolute;
	right: 18rpx;
	left: 18rpx;
}
		
.live-control-right-start{
	background: #f40;
	align-items: center;
	justify-content: center;
	height: 76rpx;
	border-radius: 40rpx;
}

.live-control-right-start-text{
	color: #fff;
	font-size: 30rpx;
}
			
.live-control-right-start-text{
	color: #fff;
	font-size: 30rpx;
}

.add-photo-image{
	width: 50rpx;
	height: 50rpx;
}

.category-box{
	display: flex;
	align-items: center;
	margin-top: 42rpx;
	padding: 0rpx 32rpx;
	flex-direction: row;
	
	/*#ifdef MP-WEIXIN*/
	margin-top: 10rpx !important;
	/*#endif*/
}

.category-item-active{
	width: 200rpx;
	height: 48rpx;
	background: rgba(156,55,40,0.08);
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	opacity: 1;
	font-size: 24rpx;
	font-weight: 700;
	color: #9C3728;
	line-height: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	text-align: center;
	line-height: 48rpx;
}
	
.category-item{
	width: 200rpx;
	height: 48rpx;
	background: #F6F7F9;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	opacity: 1;
	font-size: 24rpx;
	font-weight: 400;
	color: #666867;
	line-height: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	text-align: center;
	line-height: 48rpx;
}

.mr60{
	margin-right: 60rpx;
}

.category-title{
	font-size: 28rpx;
}
</style>
